<template>
  <div>
    <el-dialog
      :before-close="beforeClose"
      :visible.sync="show"
      :title="title"
      width="600px"
      @close="close"
      @closed="closed"
    >
      <div class="k-box-flex">
        <el-button @click="handleCreate">创建闸机</el-button>
        <div class="k-flex-1 k-text-right">
          <el-button type="text">数量{{ tableData.length }}/20</el-button>
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="note"
          label="闸机备注"
          width="150"
        />
        <el-table-column
          prop="code"
          label="闸机码"
        />
        <el-table-column
          prop="lock_door_type"
          label="闸机类型"
        />
        <el-table-column
          label="操作"
          width="150"
        >
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)">编辑</el-button>
            <el-button @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <gate-form :visible.sync="formVisible" :type="formType" :building-id="data" :data="formData" @refresh="getData" />
  </div>
</template>

<script>
import gateForm from './gateForm'
import { lockDelete, lockIndex } from '@/api/building'

export default {
  name: 'Index',
  components: { gateForm },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      show: false,
      tableData: [
        // {
        //   date: 'acacacacacacacacacacacacacacacac',
        //   name: '东门第一个',
        //   address: '上海市普陀区金沙江路 1518 弄'
        // }
      ],
      formVisible: false,
      formType: 'create',
      formData: {}
    }
  },
  computed: {
    title() {
      const text = '闸机管理'
      return text
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.show = val
        this.getData()
      }
    }
  },
  mounted() {
    this.show = this.visible
  },
  methods: {
    getData() {
      console.log('获取数据')
      lockIndex(this.data).then(res => {
        console.log('结果', res)
        this.tableData = res.data.children
      })
    },
    handleClose() {
      console.log('点击关闭')
      this.beforeClose()
    },
    handleSubmit() {
      console.log('点击确定')
      this.handleClose()
    },
    beforeClose() {
      console.log('关闭前的回调')
      this.show = false
      this.$emit('update:visible', false)
    },
    close() {
      console.log('关闭的回调')
    },
    closed() {
      console.log('关闭动画结束后的回调')
    },
    handleCreate() {
      console.log('添加')
      if (this.tableData.length < 20) {
        this.formVisible = true
        this.formType = 'create'
      } else {
        this.$notify.warning('最多只能添加20个闸机')
      }
    },
    handleEdit(item) {
      console.log('编辑', item)
      this.formVisible = true
      this.formType = 'edit'
      this.formData = item
    },
    handleDel(item) {
      console.log('删除', item)
      this.$confirm('此操作将删除该闸机, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        lockDelete(item.id).then(res => {
          console.log('删除结果', res)
          this.$notify.success('删除成功')
          this.getData()
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
